<template>
  <el-select
    v-model="platform_value"
    :placeholder="props.platformPlaceholder"
    clearable
    filterable
    @change="changePlatform"
    :disabled="disabled"
  >
    <el-option
      v-for="item in platformOptions"
      :key="item.platform_id"
      :label="item.platform_name"
      :value="getValue(item)"
    />
  </el-select>
  <el-select
    style="height: 32px"
    v-model="site_value"
    :placeholder="props.sitePlaceholder"
    :multiple="props.sitemultiple"
    collapse-tags
    clearable
    filterable
    @change="changeSite"
    :disabled="disabled"
  >
    <el-option
      v-for="item in siteOptions"
      :key="item.site_code"
      :label="item.site_code"
      :value="getSiteValue(item)"
    />
  </el-select>
</template>
<script setup>
import useCommonStore from "@/store/modules/common";
import { toRefs } from "vue";
const commonStore = useCommonStore();
const platformOptions = computed(() => {
  if (!commonStore.platformOptions) {
    commonStore.getPlatformList();
  }
  return commonStore.platformOptions || [];
});

const siteOptions = ref(null);
const props = defineProps({
  platform: [String, Number, Array],
  site: [String, Number, Array],
  platformPlaceholder: {
    type: String,
    default: "平台",
  },
  valueKey: {
    type: String,
    default: "platform_id",
  },
  sitePlaceholder: {
    type: String,
    default: "站点",
  },
  valueSizeKey: {
    type: String,
    default: "site_code",
  },
  sitemultiple: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const { disabled } = toRefs(props);

const emit = defineEmits([
  "update:platform",
  "update:site",
  "changePlatform",
  "changeSite",
  "changeSiteInfo",
]);

const getValue = (item) => {
  return props.valueKey === "item" ? item : item[props.valueKey];
};

const getSiteValue = (item) => {
  return props.valueSizeKey === "item" ? item : item[props.valueSizeKey];
};

const platform_value = computed({
  get: () => {
    const platform = props.platform;
    if (platform) {
      initPlatform(platform);
    }
    // if (!platform) reset()
    // else initPlatform(platform)
    return platform;
  },
  set: (val) => {
    emit("update:platform", val);
  },
});

const site_value = computed({
  get: () => props.site,
  set: (val) => {
    emit("update:site", val);
  },
});

const changePlatform = (val) => {
  const item = platformOptions.value.find((i) => i[props.valueKey] == val) || {};
  nextTick(() => {
    siteOptions.value = item?.sites || [];
    emit("update:site", "");
    emit("changeSite", "");
    emit("changePlatform", item?.platform_code || "");
  });
};

const changeSite = (val) => {
  const item = siteOptions.value.find((i) => i[props.valueSizeKey] == val) || {};
  const platform =
    platformOptions.value.find((i) => i[props.valueKey] == platform_value.value) || {};
  nextTick(() => {
    emit("changePlatform", platform?.platform_code || "");
    emit("changeSite", item.site_name);
    emit("changeSiteInfo", item);
  });
};

const initPlatform = (val) => {
  const item = platformOptions.value.find((i) => i[props.valueKey] == val) || {};
  nextTick(() => {
    siteOptions.value = item?.sites || [];
  });
};

const reset = () => {
  siteOptions.value = [];
};
</script>
